<template>
  <div class="draggable-search-props">
    <a-card :bordered="false">
      <a-form :form="form">
        <a-row :gutter="12" v-for="(ele, index) in keywords" :key="index">
          <a-col :md="24" :sm="24" style="background-color: #f0f0f0; position: relative; height: 72px; margin-bottom: 10px;">
            <a-icon type="close" @click.prevent="remove(index)" />
            <a-form-item label="" :colon="false">
              <a-input
                placeholder="最多15个字"
                v-decorator="[`keywords-${index}`, { rules: [{ required: true, message: '输入热词！', trigger: 'blur' }, { max: 15, message: '最多15个字', trigger: 'blur' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12" v-if="keywords.length < 5">
          <a-col :md="24" :sm="24">
            <a-button @click="addPlaceholder" icon="plus" type="primary">添加热词(最多5个)</a-button>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="24" :sm="24">
            <radio-selection label="框体样式" :selected.sync="radius" :options="radiusOptions" />
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="24" :sm="24">
            <radio-selection label="文本位置" :selected.sync="align" :options="alignOptions" />
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="24" :sm="24">
            <slider label="框体高度" :min="28" :max="40" :value.sync="sHeight" />
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="24" :sm="24">
            <color-selection label="背景颜色" v-bind:color.sync="bgColor" key="bg-color" />
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="24" :sm="24">
            <color-selection label="框体颜色" v-bind:color.sync="bBgColor" key="b-bg-color" />
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="24" :sm="24">
            <color-selection label="文本颜色" v-bind:color.sync="tColor" key="text-color" />
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script>
  import cloneDeep from 'lodash.clonedeep'
  import { ColorSelection, RadioSelection, Slider } from './other'
  export default {
    name: 'DraggableSearchProps',
    components: {
      ColorSelection,
      RadioSelection,
      Slider
    },
    props: {
      placeholder: {
        type: Array,
        default: function () {
          return []
        }
      },
      textAlign: {
        type: String,
        default: 'left'
      },
      borderRadius: {
        type: Boolean,
        default: false
      },
      height: {
        type: Number,
        default: 40
      },
      backgroundColor: {
        type: String,
        default: '#F9F9F9'
      },
      borderBackgroundColor: {
        type: String,
        default: '#FFFFFF'
      },
      textColor: {
        type: String,
        default: '#969799'
      }
    },
    computed: {
      keywords () {
        return cloneDeep(this.placeholder)
      },
      bgColor: {
        get () {
          return this.backgroundColor
        },
        set (val) {
          this.$emit('update:backgroundColor', val)
        }
      },
      bBgColor: {
        get () {
          return this.borderBackgroundColor
        },
        set (val) {
          this.$emit('update:borderBackgroundColor', val)
        }
      },
      tColor: {
        get () {
          return this.textColor
        },
        set (val) {
          this.$emit('update:textColor', val)
        }
      },
      radius: {
        get () {
          return this.borderRadius ? 2 : 1
        },
        set (val) {
          this.$emit('update:borderRadius', val !== 1)
        }
      },
      align: {
        get () {
          return this.textAlign
        },
        set (val) {
          this.$emit('update:textAlign', val)
        }
      },
      sHeight: {
        get () {
          return this.height
        },
        set (val) {
          this.$emit('update:height', val)
        }
      }
    },
    data () {
      const { changePlaceholder } = this
      const radiusOptions = [{ label: '方形', value: 1, icon: '' }, { label: '圆形', value: 2, icon: '' }]
      const alignOptions = [{ label: '居左', value: 'left', icon: '' }, { label: '居中', value: 'center', icon: '' }]
      return {
        alignOptions,
        radiusOptions,
        form: this.$form.createForm(this, { name: 'draggable-search', onFieldsChange: changePlaceholder })
      }
    },
    methods: {
      remove (index) {
        const { keywords, updateKeywords, setKeywords } = this
        keywords.splice(index, 1)
        updateKeywords()
        setKeywords()
      },
      changePlaceholder (props, fields) {
        const { keywords, updateKeywords } = this
        for (const key in fields) {
          if (!fields[key].validating) {
            const index = key.split('-')[1]
            keywords.splice(index, 1, fields[key].value)
            updateKeywords()
          }
          this.$emit('error', fields[key].errors)
        }
      },
      addPlaceholder () {
        const { keywords, updateKeywords } = this
        keywords.push('')
        updateKeywords()
      },
      setKeywords () {
        const { keywords, form } = this
        for (let i = 0; i < keywords.length; i++) {
          form.setFieldsValue({
            [`keywords-${i}`]: keywords[i]
          })
        }
      },
      updateKeywords () {
        this.$emit('update:placeholder', this.keywords)
        // 热词必填，新增时需进行校验
        this.$nextTick(() => {
          for (let i = 0; i < this.keywords.length; i++) {
            this.form.validateFields([`keywords-${i}`])
          }
        })
      }
    },
    mounted () {
      this.setKeywords()
    }
  }
</script>

<style lang="less">
  .draggable-search-props {
    .ant-col {
      padding: 5px !important;
      .anticon-close {
        position: absolute;
        font-size: 14px;
        color: #f9f9f9;
        background-color: #BBBBBB;
        right: -7px;
        top: -7px;
        border-radius: 50%;
        padding: 2px;
        cursor: pointer;
      }
      .ant-form-item {
        margin-bottom: 0;
        label {
          display: none;
        }
      }
    }
  }
</style>
